<template>
  <l-header
    v-if="settingStore.showHeader"
    :show-logo="settingStore.showHeaderLogo"
    :theme="settingStore.displayMode"
    :layout="settingStore.layout"
    :is-fixed="settingStore.isHeaderFixed"
    :menu="headerMenu"
    :is-compact="settingStore.isSidebarCompact"
  />
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
import type { RouteRecordRaw } from 'vue-router'

import { usePermissionStore, useSettingStore } from '@/store'
import type { MenuRoute } from '@/types/interface'

import LHeader from './Header.vue'

const permissionStore = usePermissionStore()
const settingStore = useSettingStore()
const { routers: menuRouters } = storeToRefs(permissionStore)
const headerMenu = computed<MenuRoute[]>(() => {
  if (settingStore.layout === 'mix') {
    if (settingStore.splitMenu) {
      return menuRouters.value.map(router => ({
        meta: router.meta!,
        path: router.path,
        title: router.meta?.title,
        icon: router.meta?.icon,
        name: router.name as string,
        redirect: router.redirect as string,
        children: [],
      }))
    }
    return []
  }
  function toMenuRouter(router: RouteRecordRaw): MenuRoute {
    return {
      meta: router.meta!,
      path: router.path,
      title: router.meta?.title,
      icon: router.meta?.icon,
      name: router.name as string,
      redirect: router.redirect as string,
      children: router.children?.map(toMenuRouter) ?? [],
    }
  }
  return menuRouters.value.map(menu => (toMenuRouter(menu)))
})
</script>
